<!doctype html>
<!--
@license
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <script src="wct-browser-config.js"></script>
  <script src="../../node_modules/wct-browser-legacy/browser.js"></script>
  <script type="module" src="../../polymer-legacy.js"></script>
<body>

<x-foo prop1="a" prop2="b"></x-foo>

<script type="module">
import { PropertiesChanged } from '../../lib/mixins/properties-changed.js';
class XFoo extends PropertiesChanged(HTMLElement) {
  static get observedAttributes() {
    return ['prop1', 'prop2'];
  }
  constructor() {
    super();
    this._propertiesChanged = sinon.spy();
  }
  connectedCallback() {
    this._enableProperties();
  }

  attributeChangedCallback(name, old, value) {
    if (value !== old) {
      this._setProperty(name, value);
    }
  }

  get prop1() {
    return this._getProperty('prop1');
  }

  set prop1(value) {
    this.setAttribute('prop1', value);
  }

  get prop2() {
    return this._getProperty('prop2');
  }

  set prop2(value) {
    this.setAttribute('prop2', value);
  }
}
window.XFoo = XFoo;
customElements.define('x-foo', XFoo);

class ShouldPropertiesChange extends PropertiesChanged(HTMLElement) {
  constructor() {
    super();
    this._propertiesChanged = sinon.spy();
  }

  connectedCallback() {
    this._enableProperties();
    //this._flushProperties();
  }

  _shouldPropertiesChange() {
    return true;
  }
}

customElements.define('should-properties-change', ShouldPropertiesChange);
</script>

<script type="module">

suite('properties-changed', function() {

  test('attributes reflected to properties via upgrade', function() {
    var el = document.querySelector('x-foo');
    assert.equal(el.prop1, 'a');
    assert.equal(el.prop2, 'b');
  });

  test('setting properties results in _propertiesChanged', function(done) {
    var el = document.createElement('x-foo');
    document.body.appendChild(el);
    el.prop1 = 'a';
    el.prop2 = 'b';
    assert.equal(el._propertiesChanged.callCount, 0, '_propertiesChanged is not async');
    setTimeout(function() {
      assert.isTrue(el._propertiesChanged.calledOnce);
      assert.equal(el._propertiesChanged.getCall(0).args[0].prop1, 'a');
      assert.equal(el._propertiesChanged.getCall(0).args[0].prop2, 'b');
      assert.equal(el._propertiesChanged.getCall(0).args[1].prop1, 'a');
      assert.equal(el._propertiesChanged.getCall(0).args[1].prop2, 'b');
      assert.equal(el._propertiesChanged.getCall(0).args[2].prop1, undefined);
      assert.equal(el._propertiesChanged.getCall(0).args[2].prop2, undefined);
      assert.equal(el.prop1, 'a');
      assert.equal(el.prop2, 'b');
      el.prop1 = 'aa';
      setTimeout(function() {
        assert.isTrue(el._propertiesChanged.calledTwice);
        assert.equal(el._propertiesChanged.getCall(1).args[0].prop1, 'aa');
        assert.equal(el._propertiesChanged.getCall(1).args[0].prop2, 'b');
        assert.equal(el._propertiesChanged.getCall(1).args[1].prop1, 'aa');
        assert.equal(el._propertiesChanged.getCall(1).args[2].prop1, 'a');
        assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[1]);
        assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[2]);
        done();
      });
    });
  });

  test('setting attributes results in _propertiesChanged', function(done) {
    var el = document.createElement('x-foo');
    document.body.appendChild(el);
    el.setAttribute('prop1', 'a');
    el.setAttribute('prop2', 'b');
    setTimeout(function() {
      assert.isTrue(el._propertiesChanged.calledOnce);
      assert.equal(el._propertiesChanged.getCall(0).args[0].prop1, 'a');
      assert.equal(el._propertiesChanged.getCall(0).args[0].prop2, 'b');
      assert.equal(el._propertiesChanged.getCall(0).args[1].prop1, 'a');
      assert.equal(el._propertiesChanged.getCall(0).args[1].prop2, 'b');
      assert.equal(el._propertiesChanged.getCall(0).args[2].prop1, undefined);
      assert.equal(el._propertiesChanged.getCall(0).args[2].prop2, undefined);
      assert.equal(el.prop1, 'a');
      assert.equal(el.prop2, 'b');
      el.setAttribute('prop1', 'aa');
      setTimeout(function() {
        assert.isTrue(el._propertiesChanged.calledTwice);
        assert.equal(el._propertiesChanged.getCall(1).args[0].prop1, 'aa');
        assert.equal(el._propertiesChanged.getCall(1).args[0].prop2, 'b');
        assert.equal(el._propertiesChanged.getCall(1).args[1].prop1, 'aa');
        assert.equal(el._propertiesChanged.getCall(1).args[2].prop1, 'a');
        assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[1]);
        assert.isFalse('prop2' in el._propertiesChanged.getCall(1).args[2]);
        done();
      });

    });
  });

  test('shouldPropertiesChange', function(done) {
    const el = document.createElement('should-properties-change');
    document.body.appendChild(el);
    assert.isTrue(el._propertiesChanged.calledOnce);
    el._invalidateProperties();
    setTimeout(function() {
      assert.isTrue(el._propertiesChanged.calledTwice);
      el._setProperty('foo', true);
      setTimeout(function() {
        assert.isTrue(el._propertiesChanged.calledThrice);
        done();
      });
    });
  });
});
</script>

</body>
</html>
